<html>
  <head>
    <meta name="viewport"
      content="
          height=%height,
          width=200,
          initial-scale=1.0
          " />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      // Az se nahraje AJAXem knihovna Google pro kresleni grafu, tak
      // zavolej funkci 'drawChart', ktera zacne kreslit grafy.
      google.setOnLoadCallback(drawChart);             
      
      // Funkce kreslici graf(y).
      function drawChart() {
        // Priprava zdroje dat: dimenze je nazev tr. cinu a jedina
        // merena velicina je pocet tr. cinu. 
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Crime name');
        data.addColumn('number', 'Crime number');
        
        // zde se pridaji hodnoty tr. cinu a jejich poctu
        %dataDefinition

        // nastaveni grafu: titulek, nezobrazuj legendu, pismo mastav male,
        // popisky vertikalni osy at jsou vykreslene pred hodnotami,
        // oblast grafu at zabere polovinu kontejneru grafu, zbytek pujde na
        // popisky, nezibrazuj popisky os grafu
        
        var view = new google.visualization.DataView(data);
      	view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" }]);
                
        var options = {
          legend: { position: 'none' },
          fontSize: 10,
          vAxis: {textPosition: 'out'},
          height: %height,
          chartArea: {left: '60%', width: '40%', height: '100%'}
        };

        // instanciuj graf
        var chart = new google.visualization.BarChart(document.getElementById('chart'));
        
        var barClickHandler = function(e)
        {
          var rowIndex;
          var parts = e.targetID.split('#');
          // kdyz je to label, zjisti jeho index
          if (parts[0] == 'vAxis' && parts.indexOf('label') >= 0) {
              var idx = parts[parts.indexOf('label') + 1];
              rowIndex = parseInt(idx);
              reportClick(rowIndex);
          }
          else if(parts[0] == 'bar')
          {
              var idx = parts[2];
              rowIndex = parseInt(idx);
              reportClick(rowIndex);
          }
        };

        google.visualization.events.addListener(chart, 'click', barClickHandler);
        google.visualization.events.addListener(chart, 'ready', function() {
      		CallbackListener.ready();
      	});
        // TODO:
        // ready handler: loading indicator
        // error handler: zobrazeni chyby
        // select, click handler: signalizace vybraneho radku
        chart.draw(view, options);
      }

      function reportClick(selectedRowIndex)
      {
        ClickListener.onCrimeItemIndexSelected(selectedRowIndex);
      }       
      // TODO: funkce pro nastaveni velikosti kontejneru pro graf 'chart' a
      // samotneho grafu
    </script>
  </head>
  <body>
    <div id="chart" style="width: 100%; height: 100%;"></div>
  </body>
</html>